<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>


    // Map => ES6新增数据结构

    // 起源: javascript传统对象的键名值字符串类型(ES6 新增Symbol),如果用其他类型作为对象的键名都会隐式的转化为字符串,在作为对象的键名 (不能用字符串以外的类型作为键名)

    // var obj = {}; // new Object()


    // var arr = [1, 2, 3];
    // var o = { a: 1, b: 2 };
    // var ele = document.createElement("li");

    // obj["hello"] = "world";
    // obj[100] = 200;
    // obj[true] = false;
    // obj[null] = undefined;
    // obj[arr] = arr;
    // obj[o] = o;
    // obj[ele] = ele;

    // console.log(obj);

    // for (var key in obj) {
    //     console.log(1, key);
    // }

    // console.log(arr.toString()); // "1,2,3"
    // console.log(obj.toString()); // '[object Object]'
    // console.log(ele.toString()); // '[object HTMLLIElement]'


    // 为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

    // 传统对象(Object)  => 键值对形式存在(key(字符串)-value)
    // ES6 Map数据结构(Map)  => 键值对形式存在(key(任意类型)-value)


    // 如何创建Map数据结构?  => 通过构造函数Map创建
    var m = new Map();
    console.log(m);


    // Map数据结构的属性和方法
    // 属性
    // size  返回Map数据结构成员的个数(数据的条数)

    // 方法:
    // set(key,val)  对应键名设置键值(键名可以是任意类型 -> 没有就新增,有就修改) => 返回值: 原本的Map数据结构 => 链式操作
    // get(key)      对应键名获取键值  => 返回值:键值
    // delete(key)   对应键名删除整个属性(单删)  => 删除成功=>true 失败=>false
    // clear()       清空Map数据结构中 所有的数据 => 删除现有的数据 不会失败 => undefined
    // has(key)      判断Map数据结构中是否存在某个键名

    // forEach(function(val,key){})   遍历Map数据结构的方法


    var arr = [1, 2, 3];
    var o = { a: 1, b: 2 };

    // m.set("hello", "world");
    // m.set(100, 200);
    // m.set(true, false);
    // m.set(null, undefined);
    // m.set(arr, arr);
    // m.set(o, o);

    // console.log(m);

    // 返回值
    // var result = m.set("hello", "world");
    // console.log("返回值", result);
    // console.log(result === m);

    m.set("hello", "world").set(100, 200).set(true, false).set(null, undefined).set(arr, arr).set(o, o);

    // 取值
    // console.log(m.get("hello"));
    // console.log(m.get(100));
    // console.log(m.get(true));
    // console.log(m.get(null));
    // console.log(m.get(arr));
    // console.log(m.get(o));


    // 删除
    // console.log(m.delete("hello"));
    // console.log(m.delete(100));
    // console.log(m.delete(true));
    // console.log(m.delete(null));
    // console.log(m.delete(arr));
    // console.log(m.delete(o));
    // console.log(m.delete("abc"));

    // console.log(m.clear());

    // has()  是否存在某个键名
    // console.log(m.has("hello"));
    // console.log(m.has(100));
    // console.log(m.has(true));
    // console.log(m.has(null));
    // console.log(m.has(arr));
    // console.log(m.has(o));
    // console.log(m.has("abc"));


    // 遍历
    // m.forEach(function (val, key, m1) {
    //     console.log(val, key);
    // })











</script>

</html>